<template>
    <div ref="dtec" style="width: 100vw;height: 100vh;"></div>
</template>
<script setup>
const dtec = ref()
import * as echarts from 'echarts';

var { data } = await useFetch('/api/hello')
onMounted(async () => {
    var chartDom = dtec.value;
    console.log(chartDom)
    var myChart = echarts.init(chartDom);
    var option;

    // console.log(JSON.stringify(data.data.value))
    data = data.value
    console.log(data)
    const treemapOption = {
        title: {
            text: "盒子模型"
        },
        tooltip: {
            show: true
        },

        toolbox: {
            show: true,
            feature: {
                saveAsImage:{
                    type:"png",
                    text:"保存图片"
                },
                myTool1: {
                    show: true,
                    title: '自定义扩展方法1',
                    icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                    onclick: function () {
                        alert('myToolHandler1')
                    }
                },
                myTool2: {
                    show: true,
                    title: '自定义扩展方法',
                    icon: 'image://https://echarts.apache.org/zh/images/favicon.png',
                    onclick: function () {
                        alert('myToolHandler2')
                    }
                }
            }
        },
        series: [
            {
                title: {

                },
                type: 'treemap',
                name: "option",
                id: 'echarts-package-size',
                animationDurationUpdate: 1000,
                roam: false,
                nodeClick: undefined,
                data: data.children,
                universalTransition: true,
                label: {
                    show: true,
                    formatter: '名字{b}: 值{@score}'
                },
                upperLabel: {
                    show: false
                },
                breadcrumb: {
                    show: true
                },
                select: {
                    label: {
                        show: true
                    }
                },
                blur: {
                    label: {
                        show: true,
                        position: 'inside',

                        color: "#000",
                        formatter: '{b}----{@score}',
                        labelLine: {
                            show: true
                        }
                    },
                    upperLabel: {
                        show: true
                    }
                },
                emphasis: {
                    focus: 'series',
                    blurScope: 'coordinateSystem'
                }
            }
        ]
    };
    const sunburstOption = {
        tooltip: {
            show: true
        },
        series: [
            {
                type: 'sunburst',
                id: 'echarts-package-size',
                radius: ['20%', '90%'],
                animationDurationUpdate: 1000,
                nodeClick: undefined,
                data: data.children,
                universalTransition: true,
                itemStyle: {
                    borderWidth: 1,
                    borderColor: 'rgba(255,255,255,.5)'
                },
                label: {
                    show: false
                }
            }
        ]
    };
    let currentOption = treemapOption;
    myChart.setOption(currentOption);
    setInterval(function () {
        currentOption =
            currentOption === treemapOption ? sunburstOption : treemapOption;
        myChart.setOption(currentOption);
    }, 10000);


    option && myChart.setOption(option);

})
</script>
<style scoped></style>
